<template>
    <div class="wapper">
        <div class="container">
            <div class="fit-content-item">自适应内容水平<br>垂直居中元素</div>
        </div>
    </div>
</template>

<style scoped>
.wapper {
    height: 100%;
    overflow: auto;
}

.container {
    position: relative;
    width: 500px;
    height: 200px;
    background: #eee;
}

.fit-content-item {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    margin: auto;
    background: rgb(72, 214, 143);
}
</style>